<template>
  <el-dialog v-model="dialogVisible" :title="title" :modal="modal" :width="width" :fullscreen="fullscreen"
    :modal-class="[modelClassDefault, modalCalss]" :open-delay="openDelay" :close-delay="closeDelay"
    :destroy-on-close="destroyOnClose" :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape" :show-close="showClose" :draggable="draggable" :close-icon="closeIcon"
    :append-to-body="appendToBody">
    <el-scrollbar :max-height="$common.dialogMaxHeight" v-if="defaultBtns">
      <component ref="componentRef" :is="compontent" :params="params" @cancel="onCancelBtn" @ok="onOk"
        @buttons-ready="onButtonsReady" />
    </el-scrollbar>
    <component v-else ref="componentRef" :is="compontent" :params="params" @cancel="onCancelBtn" @ok="onOk" />
    <!-- 对话框footer -->
    <template #footer v-if="defaultBtns">
      <div class="custom-dialog-footer">
        <el-button v-for="(item, index) in buttons" :key="index" :plain="item.plain || false"
          :type="item.type || 'primary'" @click="item.click"
          v-prevent-reclick>{{ item.title }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" name="Dialog">
import { ref, reactive, computed, onMounted, inject, onUnmounted } from "vue";
interface ButtonItem {
  plain?: boolean;
  type?: string;
  click: () => void;
  title: string;
}

const props = defineProps({
  dialogVisible: { type: Boolean, default: true },//是否展示对话框
  title: { type: String, default: "对话框标题" },//对话框标题
  compontent: { type: AnalyserNode, default: null },//弹窗（组件）
  params: { type: Object, default: {} },//传递的参数
  defaultBtns: { type: Boolean, default: true },//是否使用默认的操作按钮（取消，确定）
  modal: { type: Boolean, default: true },//是否展示对话框遮罩层
  width: { type: [String, Number], default: 800 },//对话框宽度
  fullscreen: { type: Boolean, default: false },//是否为全屏对话框
  modalCalss: { type: String, default: null },//自定义对话框遮罩calss类名
  openDelay: { type: Number, default: 0 },//dialog 打开的延时时间，单位毫秒
  closeDelay: { type: Number, default: 0 },//dialog 关闭的延时时间，单位毫秒
  destroyOnClose: { type: Boolean, default: true },//是否关闭对话框时销毁
  closeOnClickModal: { type: Boolean, default: false },//是否开启点击遮罩关闭对话框
  closeOnPressEscape: { type: Boolean, default: false },//是否开启点击ESC闭对话框
  showClose: { type: Boolean, default: true },//是否展示关闭按钮
  draggable: { type: Boolean, default: true },//是否开启拖动功能
  closeIcon: { type: String, default: null },//自定义关闭图表，默认close
  onCancel: { type: Function, default: () => { } },//成功回调
  onConfirm: { type: Function, default: () => { } },//错误回调
  appendToBody: { type: Boolean, default: false },//对话框是否插入至body元素上,嵌套的对话框必须指定该属性并赋值为true
});

const $common: any = inject('$common')
const modelClassDefault = ref('custom-dialog-box')
const buttons = ref<ButtonItem[]>([]) // 使用 ButtonItem 接口定义 buttons

/** 计算 */
const dialogVisible = computed(() => {
  return props["dialogVisible"]
})
console.log('compontent', props.compontent)

/** 方法 */
const onCancelBtn = (data: any) => {
  console.log('dialogCancel回调', data)
  props.onCancel();
}

const onOk = (data: any) => {
  console.log('dialogOk回调', data)
  props.onConfirm(data);
}

const onButtonsReady = (buttonsData: ButtonItem[]) => {
  buttons.value = buttonsData
}

/** 生命周期 */
onMounted(() => {
  console.log(props.title + '-挂载完成');
})

onUnmounted(() => {
  // 在组件卸载时清理数据
  buttons.value = []
})
</script>
<style lang="scss">
/** 自定义dialog对话框 */
.custom-dialog-box {
  .el-dialog__header {
    .el-dialog__title {
      font-weight: 500;
      font-size: 16px;
      color: var(--text-black-85);
    }

    .el-dialog__headerbtn .el-icon {
      font-size: 18px;
    }
  }

  .el-dialog__footer {
    padding: 0;
  }
}
</style>
